<template>
  <main>
<!--    <div style="height: 100px;z-index: 7">-->
<!--      <i v-if="!dynamicShow" class="el-icon-loading">拼命加载中..</i>-->
<!--    </div>-->

      <div v-if="(page.records).length==0&&visible==1"><h4><i class="el-icon-loading"></i></h4></div>
      <div v-if="page.records.length!=0&&dynamicShow&&visible==1"  id="myDynamic" v-for="(item,index) in page.records">
        <div style="box-sizing: border-box;padding:10px"  >
          <header>
            <div id="avatar">
              <img  src="../../../src/assets/img/tab1.jpg" alt="">
            </div>
            <div id="user">
              <div style="display: flex;flex-direction: column;justify-content: space-around">
                <h3>{{isOther?$store.state.other.userName:userName}}</h3>
                <p>{{item.createTime}}</p>
              </div>
              <div style="display: flex;justify-content: flex-end;width: 40%">
                <i style="cursor:pointer;" class="el-icon-arrow-down"></i>
              </div>

            </div>
          </header>
          <article>
            <div id="blank">

            </div>
            <div style="width: 89%">
              <p>{{item.context}}</p>
              <img v-if="item.imageId" style="height: 200px;width: auto;max-width: 100%" :src="getImage(item.id)" alt="">
            </div>

          </article>
        </div>
        <footer>
          <div @click="deleteIt(item.id)" class="fBtn"><i class="el-icon-delete"> </i></div>
          <div class="fBtn"><i class="el-icon-star-off"></i> {{'收藏'}}</div>
          <div class="fBtn"><i class="el-icon-s-comment"> </i> {{getCommentNum(item.id)}}</div>
          <div class="fBtn"><i class="el-icon-s-opportunity"> </i> {{item.likeNum}}</div>
        </footer>
      </div>
      <el-button style="width: 60%" v-if="!loading&&visible==1" @click="load">查看更多</el-button>
      <div id="more" v-if="loading&&visible==1" >
        <i class="el-icon-loading"></i>
        <span>正在拼了老命加载...</span>
      </div>

      <div v-if="visible==0" style="height: 180px;display: flex;align-items: center">
        <h3>该用户已隐藏动态</h3>
      </div>

  </main>
</template>

<script>
import Aside from "../../components/content/Aside";
import Dynamic from "../../components/content/Dynamic";
import {myDynamic,delDynamic} from "../../network/dynamic"
import {getArchives} from "../../network/user";

export default {
  name: "myDynamic",
  components: {Aside},
  data(){
    return{
      isOther:false,
      visible:1,
      dynamicName:localStorage.getItem("dynamicName"),
      dynamicShow:false,
      userName:localStorage.getItem('userName'),
      userType:localStorage.getItem('userType'),
      map:'',
      map2:'',
      page:{
        records:[]
      },
      loading:false,
      dynamics:[]
    }
  },
  created() {
    this.getData(localStorage.getItem('userId'),localStorage.getItem('userType'))
  },
  methods:{

    getImage(id){
      return 'data:image/png;base64,'+this.map2[id].list[0];
    },
    getCommentNum(id){
      return this.map2[id].count
    },
    getData(id,type){
      if(this.$route.fullPath.slice(0,6)=='/other'){
        myDynamic(this.$store.state.other.uid,this.$store.state.other.type,1)
            .then(res=>{
              console.log(res)
              this.isOther=true
              this.page=res.data.extend.page
              this.map=res.data.extend.map
              this.map2=res.data.extend.dynamicMap
              this.dynamicShow=true
            }).catch(err=>{
          console.log(err)
        })
        this.visible=localStorage.getItem("dynamicVisible")
      }else {
        myDynamic(id,type,1)
            .then(res=>{
              console.log(res)

              this.page=res.data.extend.page
              this.map=res.data.extend.map
              this.map2=res.data.extend.dynamicMap
              this.dynamicShow=true
            }).catch(err=>{
          console.log(err)
        })
      }

    },
    deleteIt(id){
      delDynamic(id)
      .then(res=>{
        console.log(res)
        this.$message.warning(res.data.extend.msg)
        this.getData(localStorage.getItem('userId'),localStorage.getItem('userType'))
      })
    },
    // 滚动操作

    load(){
      this.loading=true
      setTimeout(()=>{
        this.dynamics.push( {userName:'美食家的厨房', Favorites:234,like:266, comment:122,
          content:'巧克力的古早味蛋糕，你看，是不是特好看巧克力的古早味蛋糕，你大王大大青蛙打网球我的青蛙打网球的武器无穷大无穷大完全看，是不是特好看巧克力的古早味蛋糕，你看，是不是特好看',
          img:require("../../assets/img/tab2.jpg"),update:'2020/2/16'})
        this.loading=false
      },2000)

    }
  }
}
</script>

<style scoped>
  main{
    width: 70%;
    /*height: 2000px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #edf5f2;
  }
  #myDynamic{
    margin: 20px;
    width: 60%;
    position: relative;
    box-shadow: 0 0px 5px grey;
    background-color: #fff;
    word-break: break-all;
  }
  header{
    height: 70px;
    width: 100%;
    display: flex;
  }
  #avatar{
    height:100%;
    width: 11%;
    /*border-radius: 50%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #000;*/
  }
  #avatar img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  #user{
    color: rgb(51,51,51);
    width: 89%;
    height: 100%;
    display: flex;
    justify-content:space-between;
  }
  #user h3:hover{
    color: red;
    cursor: pointer;
  }
  #user *{
    padding: 0;
    margin: 0;
  }
  #user p{
    font-size: 13px;
  }
  article{
    width: 100%;
    display: flex;
  }
  #blank{
    display: flex;
    width: 11%;
    /*background-color: #000;*/
  }
  footer{
    height: 35px;
    width: 100%;
    border-top: 1px solid #e7d7d7;
    display: flex;
    justify-content: space-between;
  }
  footer div{
    cursor: pointer;
  }
  .fBtn{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(128,128,128);
    font-size: 15px;
  }
  .fBtn i{
    font-size: 18px;
  }
  #more{

  }
  #more span{
    font-size: small;
  }
</style>